<template>
  <div id="data-view" >
    <!-- <dv-full-screen-container> -->
    <top-header />
    <div class="main-content">
      <cesium-content />
      <div class="left-div">
        <left-content />
      </div>

      <div class="right-div">
        <right-content />
      </div>
    </div>
    <!-- <top-header  style="z-index:1000"/> -->
    <!-- <proj-map /> -->
    <!--
      <div class="main-content">
        <div class="content-left">
           <proj-map />
           <proj-tab />
           <proj-line-chart/>

        </div>
        <div class="content-right">
          <item-card />
    </div>-->

    <!-- <digital-flop /> -->

    <!-- <div class="block-left-right-content"> -->
    <!-- <ranking-board /> -->

    <!-- <div class="block-top-bottom-content">
            <div class="block-top-content">
              <rose-chart />

              <water-level-chart />

              <scroll-board />
            </div>

            <cards />
    </div>-->
    <!-- </div> -->
    <!-- </div> -->
    <!-- </dv-full-screen-container> -->
  </div>
</template>

<script>
import topHeader from './topHeader'
import cesiumContent from './comCesiums/cesiumContent'
import leftContent from './comCesiums/leftContent'
import rightContent from './comCesiums/rightContent'

export default {
  name: 'DataView',
  components: {
    topHeader,
    cesiumContent,
    leftContent,
    rightContent
  },
  data () {
    return {}
  },
  methods: {}
}
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-image: url("./img/bg2.png");
  background-size: 100% 100%;
  // box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;

  .main-content {
    position: relative;
    // box-sizing: border-box;
    width: 98%;
    max-height: calc(100% - 66px);
    left: 50%;
    transform: translateX(-50%);

    flex: 1;

    // background: red;
  }

  .left-div {
    position: absolute;
    width: 20%;
    height:100%;
    left: 0%;
    top: 0%;
    min-width: 200px;
    color: #fff;
  }

  .right-div {
    position: absolute;
    width: 20%;
    height:100%;
    right: 0%;
    top: 0%;
    min-width: 200px;
    color: #fff;
  }

  //   #dv-full-screen-container {
  //     background-image: url('./img/bg2.png');
  //     background-size: 100% 100%;
  //     box-shadow: 0 0 3px blue;
  //     display: flex;
  //     flex-direction: column;
  //   }

  //   .main-content {
  //     flex: 1;
  //     display: flex;
  //     justify-content:space-around;
  // //     background:rgba(6,97,255,1);
  // // opacity:0.2859;
  //   }

  //   .content-left {
  //     width:62%;
  //     display: flex;
  //     flex-direction: column;
  //     overflow: hidden;
  //   }
  //   .content-right {
  //     width:35%;
  //     display: flex;
  //     flex-direction: column;
  //   }
  //   .block-left-right-content {
  //     flex: 1;
  //     display: flex;
  //     margin-top: 20px;
  //   }

  //   .block-top-bottom-content {
  //     flex: 1;
  //     display: flex;
  //     flex-direction: column;
  //     box-sizing: border-box;
  //     padding-left: 20px;
  //   }

  //   .block-top-content {
  //     height: 55%;
  //     display: flex;
  //     flex-grow: 0;
  //     box-sizing: border-box;
  //     padding-bottom: 20px;
  //   }
}
</style>
